import {Component,OnInit,NgModule,Directive,Pipe} from '@angular/core';
import {Car} from '../domain/car';
import {CarService} from '../service/carservice';
import {DataTableModule,SharedModule,Message,MenuItem,SelectItem,DropdownModule,SliderModule,MultiSelectModule,CalendarModule,DialogModule,LazyLoadEvent,FilterMetadata} from 'primeng/primeng';

@NgModule({
    imports: [],
    exports: [],
    declarations: [],
    providers: []
})
@Component({
    selector:"datatabledemo",
    templateUrl: './datatabledemo.html'
})

@Directive({
  selector: 'datatabledemo'
})
@Pipe({
  name: 'datatabledemo'
})
export class DataTableDemo implements OnInit {

    loading: boolean;
    displayDialog: boolean;
    car: Car = new PrimeCar();

    newCar: boolean;
    cars: Car[];
    cols: any[];
    msgs: Message[] = [];
    sales: any[];
    brands: SelectItem[];

    colors: SelectItem[];
    selectedCar: Car;
    dialogVisible: boolean;

    carsLarge: Car[];
    totalRecords: number;
    columnOptions: SelectItem[];
    stacked: boolean;
    constructor(private carService: CarService) { }

    ngOnInit() {
        this.loading = true;
        this.carService.getCarsSmall().subscribe(data => {
            console.log(data);
            this.cars = <Car[]>data;

        });
        this.loading = false;
        this.cols = [
            {field: 'vin', header: 'Vin'},
            {field: 'year', header: 'Year'},
            {field: 'brand', header: 'Brand'},
            {field: 'color', header: 'Color'}
        ];
        this.sales = [
            {brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342'},
            {brand: 'Samsung', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122'},
            {brand: 'Microsoft', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500'},
            {brand: 'Philips', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323,'},
            {brand: 'Song', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332'},
            {brand: 'LG', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005'},
            {brand: 'Sharp', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214'},
            {brand: 'Panasonic', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322'},
            {brand: 'HTC', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232'},
            {brand: 'Toshiba', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533'}
        ];

       this.brands = [];
       this.brands.push({label: 'All Brands', value: null});
       this.brands.push({label: 'Audi', value: 'Audi'});
       this.brands.push({label: 'BMW', value: 'BMW'});
       this.brands.push({label: 'Fiat', value: 'Fiat'});
       this.brands.push({label: 'Honda', value: 'Honda'});
       this.brands.push({label: 'Jaguar', value: 'Jaguar'});
       this.brands.push({label: 'Mercedes', value: 'Mercedes'});
       this.brands.push({label: 'Renault', value: 'Renault'});
       this.brands.push({label: 'VW', value: 'VW'});
       this.brands.push({label: 'Volvo', value: 'Volvo'});

       this.colors = [];
       this.colors.push({label: 'White', value: 'White'});
       this.colors.push({label: 'Green', value: 'Green'});
       this.colors.push({label: 'Silver', value: 'Silver'});
       this.colors.push({label: 'Black', value: 'Black'});
       this.colors.push({label: 'Red', value: 'Red'});
       this.colors.push({label: 'Maroon', value: 'Maroon'});
       this.colors.push({label: 'Brown', value: 'Brown'});
       this.colors.push({label: 'Orange', value: 'Orange'});
       this.colors.push({label: 'Blue', value: 'Blue'});


       this.totalRecords = 500000;

       this.columnOptions = [];
        for(let i = 0; i < this.cols.length; i++) {
            this.columnOptions.push({label: this.cols[i].header, value: this.cols[i]});
        }


    }
    selectCar(car: Car) {
        this.msgs = [];
        this.msgs.push({severity:'info', summary:'Car Select', detail:'Vin: ' + car.vin});
    }
    showCar(car: Car) {
       this.selectedCar = car;
       this.dialogVisible = true;
   }

   loadCarsLazy(event: LazyLoadEvent) {
        //for demo purposes keep loading the same dataset
        //in a real production application, this data should come from server by building the query with LazyLoadEvent options

        this.carsLarge = [
            {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
            {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
            {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
            {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
            {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
            {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
            {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
            {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
            {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
            {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"},
            {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
            {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
            {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
            {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
            {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
            {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
            {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
            {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
            {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
            {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"},
            {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
            {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
            {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
            {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
            {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
            {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
            {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
            {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
            {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
            {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"},
            {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
            {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
            {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
            {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
            {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
            {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
            {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
            {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
            {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
            {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
        ];

    }
    toggle() {
        this.stacked = !this.stacked;
    }
    showDialogToAdd() {
            this.newCar = true;
            this.car = new PrimeCar();
            this.displayDialog = true;
        }

        save() {
            let cars = [...this.cars];
            if(this.newCar)
                cars.push(this.car);
            else
                cars[this.findSelectedCarIndex()] = this.car;

            this.cars = cars;
            this.car = null;
            this.displayDialog = false;
        }

        delete() {
            let index = this.findSelectedCarIndex();
            this.cars = this.cars.filter((val,i) => i!=index);
            this.car = null;
            this.displayDialog = false;
        }

        onRowSelect(event) {
            this.newCar = false;
            this.car = this.cloneCar(event.data);
            this.displayDialog = true;
        }

        cloneCar(c: Car): Car {
            let car = new PrimeCar();
            for(let prop in c) {
                car[prop] = c[prop];
            }
            return car;
        }

        findSelectedCarIndex(): number {
            return this.cars.indexOf(this.selectedCar);
        }
    }

    class PrimeCar implements Car {

        constructor(public vin?, public year?, public brand?, public color?) {}
    }
